<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html" charset="utf-8"/>
    <title>Spring boot X-admin v1.0</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/x-admin.css}" media="all"/>
</head>
<body style="background-color: #393D49">
<form class="layui-form layui-form-pane" method="post">
    <div class="x-box">
        <div class="x-top">
            <ul class="x-login-right">
                <li style="background-color: #F1C85F;" color="#F1C85F"/>
                <li style="background-color: #EA569A;" color="#EA569A"/>
                <li style="background-color: #393D49;" color="#393D49"/>
            </ul>
        </div>
        <div class="x-mid">
            <div class="x-avtar">
                <img th:src="@{/images/logo.png}" alt=""/>
            </div>
            <div class="input">
                <form class="layui-form">
                    <div class="layui-form-item x-login-box">
                        <label th:for="username" th:class="layui-form-label">
                            <i class="layui-icon">&#xe612;</i>
                        </label>
                        <div class="layui-input-inline">
                            <input th:type="text" th:id="username" th:name="username" th:required="required"
                                   lay-verify="username"
                                   th:autocomplete="off" th:placeholder="username" th:class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-form-item x-login-box">
                        <label for="pass" class="layui-form-label">
                            <i class="layui-icon">&#xe628;</i>
                        </label>
                        <div class="layui-input-inline">
                            <input type="password" id="pass" name="password" required="" lay-verify="pass"
                                   autocomplete="off" placeholder="******" class="layui-input"/>
                        </div>
                    </div>
                    <th:if test="${msg!=null }">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <p style="color: red; margin-left: 80px;"
                                                                     th:text="${msg}"></p>
                    </th:if>
                    <div class="layui-form-item" id="loginbtn">
                        <button class="layui-btn" lay-filter="save" lay-submit="">登 录</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <p style="color:#fff;text-align: center;">Copyright © 2017.Company name All rights X-admin </p>
</form>
</body>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8">
</script>
<script>
    layui.use(['form'],
            function () {
                $ = layui.jquery;
                var form = layui.form(), layer = layui.layer;

                $('.x-login-right li').click(function (event) {
                    color = $(this).attr('color');
                    $('body').css('background-color', color);
                });
                //提交监听事件
                form.on('submit(save)', function (data) {
                    params = data.field;
                    submit($, params);
                    return false;
                });

            });
</script>
</html>